<template>
  <div>
    <h1>展示电影</h1>
    <table>
        <tr>
            <td>序号</td>
            <td>电影名</td>
            <td>上映时间</td>
            <td>演员</td>
            <td>图片</td>
        </tr>
        <tr v-for="i in movie_list">
            <td>{{i.id}}</td>
            <td>
                <router-link :to="{name:'ShowDetails',params:{'mid':i.id}}">{{i.name}}</router-link>
            </td>
            <td>{{i.time}}</td>
            <td>{{i.actor}}</td>
            <td><img :src="'http://127.0.0.1:8000'+i.img" alt="" style="width:200px;height:200px;"></td>
        </tr>
    </table>
    <button @click="up_page">上一页</button>
    <button v-for="i in page_list" :key="i" @click="get_page(i)">{{i}}</button>
    <button @click="down_page">下一页</button>
  </div>
</template>

<script>
export default {

  data () {
    return {
        movie_list:[],
        pid:1,
        page_sum:0,
        page_list:[]
    }
  },

  methods: {
      show_page(){
          this.axios({
          url:'http://127.0.0.1:8000/app01/movies/',
          method:'get',
          params:{'pid':this.pid}
      }).then(resp=>{
          console.log(resp)
          this.movie_list=resp.data.data
          this.page_sum=resp.data.page_sum
          this.page_list=resp.data.page_list
      })

      },
      get_page(pagenum){
          this.pid=pagenum
          console.log(pagenum)
          this.show_page()
      },
      up_page(){
          if(this.pid==1){

          }else{
              this.pid-=1
              console.log(this.pid)
              this.show_page()
          }
      },
      down_page(){
          if(this.pid<this.page_sum){
              this.pid+=1
              console.log(this.pid)
              this.show_page()
          }else{

          }
      }
  },
  created(){
      this.show_page()

     
  }
}
</script>

<style>

</style>